<template>
  <div class="box">
    <table-search
      slot="searchbar"
      v-model="searchData"
      :columns="searchOptions"
      @search="handleSearch"
    >
      <template slot="button">
        <!-- <a-button @click="handleExport" icon="download" style="color:#606266" slot="button" type="link">
          导出
        </a-button>| -->
        <a-button
          @click="handleAdd"
          icon="plus"
          style="color: #606266"
          slot="button"
          type="link"
        >
          添加
        </a-button>
      </template>
    </table-search>
    <div class="table-box">
      <a-table
        :columns="columns"
        :data-source="data"
        size="middle"
        :scroll="{ x: 1040 }"
        :pagination="false"
      >
        <template slot="index" slot-scope="scope">{{ scope.key }}</template>
        <template slot-scope="scope" slot="action">
          <a-button
            style="color: #2a5ee3"
            type="link"
            @click="handleEdit(scope)"
            size="small"
          >
            编辑
          </a-button>
          <a-button
            style="color: #f34f4a"
            type="link"
            @click="handleDelete(scope)"
            size="small"
          >
            删除
          </a-button>
        </template>
      </a-table>
      <div class="pagination-box">
        <a-pagination
          show-quick-jumper
          @change="handleChange"
          :show-total="(total) => `共 ${total} 条`"
          :defaultCurrent="pagination.current"
          :pageSize="pagination.pageSize"
          :total="pagination.total"
          :hideOnSinglePage="true"
        />
      </div>
    </div>

    <a-modal class="modal-mechanism-box" :visible="visible" width="600px">
      <template slot="title">
        <span>{{ modalTitle ? "编辑" : "添加" }}</span>
      </template>
      <template slot="closeIcon">
        <div style="width: 100%; height: 100%" @click="handleCancel">
          <a-icon type="close" />
        </div>
      </template>
      <template slot="footer">
        <div style="text-align: center">
          <a-button
            style="margin: 0 25px"
            key="back"
            type="danger"
            ghost
            @click="handleCancel"
          >
            取消
          </a-button>
          <a-button
            style="margin: 0 25px"
            key="submit"
            type="primary"
            :loading="confirmLoading"
            @click="handleOk"
          >
            确定
          </a-button>
        </div>
      </template>
      <a-form-model
        :model="form"
        layout="horizontal"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 16 }"
      >
        <a-form-model-item label="机构名称">
          <a-input v-model="form.name" placeholder="请输入机构名称" />
        </a-form-model-item>
        <a-form-model-item label="用户名称">
          <a-input v-model="form.name" placeholder="请输入用户名称" />
        </a-form-model-item>
        <a-form-model-item label="管辖乡镇">
          <a-checkbox-group
            v-model="form.town"
            name="town"
            class="checkbox-box"
          >
            <a-checkbox
              v-for="(item, index) in plainOptions"
              :key="index"
              style="min-width: 92px"
              :value="item.value"
            >
              {{ item.label }}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item label="分配权限">
          <a-checkbox @change="handleSelectAll"> 全选 </a-checkbox>
          <a-checkbox @change="handleUnfold"> 展开 </a-checkbox>
          <a-tree
            v-model="form.checkedKeys"
            checkable
            :expanded-keys="expandedKeys"
            :tree-data="treeData"
            @expand="handleonExpand"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const treeData = [
  {
    title: "超市管理",
    key: "超市管理",
    children: [
      { title: "超市列表", key: "超市列表" },
      { title: "收银机管理", key: "收银机管理" },
      { title: "收银员管理", key: "收银员管理" },
    ],
  },
  {
    title: "商品分类",
    key: "商品分类",
    children: [
      { title: "分类列表", key: "分类列表" },
      { title: "商品列表", key: "商品列表" },
    ],
  },
  {
    title: "统计分析查询",
    key: "统计分析查询",
    children: [
      { title: "超市汇总", key: "超市汇总" },
      { title: "商品订单列表", key: "商品订单列表" },
      { title: "识别异常订单", key: "识别异常订单" },
      { title: "分类总营业额", key: "分类总营业额" },
      { title: "收银机汇总", key: "收银机汇总" },
      { title: "商品销售统计", key: "商品销售统计" },
    ],
  },
  {
    title: "数据分析",
    key: "数据分析",
    children: [{ title: "经营分析", key: "经营分析" }],
  },
  {
    title: "异常预警",
    key: "异常预警",
    children: [
      { title: "频繁离线预警", key: "频繁离线预警" },
      { title: "七天未上线预警", key: "七天未上线预警" },
      { title: "七天交易异常预警", key: "七天交易异常预警" },
      { title: "预警信息统计", key: "预警信息统计" },
    ],
  },
  {
    title: "操作日志",
    key: "操作日志",
  },
  {
    title: "系统设置",
    key: "系统设置",
    children: [
      { title: "税务机构管理", key: "税务机构管理" },
      { title: "注册类型管理", key: "注册类型管理" },
      { title: "集团数据管理", key: "集团数据管理" },
    ],
  },
];

import columns from "./colums";
export default {
  data() {
    return {
      expandedKeys: [], //展开指定节点
      treeData,
      visible: false,
      modalTitle: false,
      confirmLoading: false,
      columns,
      data: [
        {
          key: "1",
          mechanismName: "惠民县税务局",
          township: "惠民县",
        },
        {
          key: "2",
          mechanismName: "惠民县税务局",
          township: "惠民县",
        },
      ],
      plainOptions: [
        { label: "市辖区", value: "市辖区" },
        { label: "滨城区", value: "滨城区" },
        { label: "惠民县", value: "惠民县" },
        { label: "阳信县", value: "阳信县" },
        { label: "市辖区1", value: "市辖区1" },
        { label: "滨城区1", value: "滨城区1" },
        { label: "惠民县1", value: "惠民县1" },
        { label: "阳信县1", value: "阳信县1" },
      ],
      pagination: {
        total: 50,
        current: 1,
        pageSize: 10,
      },
      searchData: {},
      searchOptions: [
        {
          type: "text",
          label: "机构名称",
          prop: "supermarketName",
        },
      ],
      form: {
        checkedKeys: [],
      },
    };
  },
  methods: {
    handleSearch(val) {
      console.log(val, "查询");
    },
    handleEdit(val) {
      console.log(val, "编辑");
      this.visible = true;
      this.modalTitle = true;
    },
    handleDelete(val) {
      console.log(val, "删除");
    },
    handleChange(page, pageSize) {
      console.log(page, pageSize, "分页");
    },
    handleExport() {
      console.log("导出");
    },
    handleAdd() {
      console.log("添加");
      this.visible = true;
      this.modalTitle = false;
    },
    handleOk() {
      console.log(this.form);
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      this.visible = false;
    },
    handleonExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },
    handleSelectAll(val) {
      if (val.target.checked) {
        this.treeData.map((item) => {
          this.form.checkedKeys.push(item.key);
        });
      } else {
        this.form.checkedKeys = [];
      }
    },
    handleUnfold(val) {
      if (val.target.checked) {
        // this.defaultExpandAll = true;
        this.handleFilterUnfold(this.treeData);
      } else {
        // this.defaultExpandAll = false;
        this.expandedKeys = [];
      }
    },
    handleFilterUnfold(data) {
      data.map((item) => {
        if (!item.children) {
          this.expandedKeys.push(item.key);
        } else {
          this.expandedKeys.push(item.key);
          this.handleFilterUnfold(item.children);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .table-box {
    padding-top: 30px;
  }
  .pagination-box {
    text-align: right;
    // position: absolute;
    // bottom: 40px;
    // right: 16px;
    padding-top: 40px;
    .ant-pagination {
      display: inline-block;
    }
  }
}
.checkbox-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, 21%);
  grid-column-gap: 16px;
  width: 100%;
  .ant-checkbox-wrapper {
    margin: 10px 0;
  }
}
</style>
<style lang="less">
.modal-mechanism-box {
  .ant-modal-body {
    overflow-x: hidden;
    height: 410px;
  }
}
</style>
